<template>
  <el-dialog
    title="用户列表"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="btnCancel()"
    width="90vw"
    top="5vh"
    append-to-body
  >
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="dataForm" class="form-inline">
          <el-form-item label="员工子组">
            <el-select
              :clearable="true"
              v-model="dataForm.ryZz"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option
                v-for="(item, index) in userZzOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位层级">
            <el-select
              :clearable="true"
              v-model="dataForm.ryZwjbbh"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option
                v-for="(item, index) in userZjOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位">
            <el-input
              v-model="dataForm.ryZhiwei"
              placeholder="职位"
              style="width: 150px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="marginLeft"
              @click="switchDepartment"
              plain
              >检索</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <div class="user__main boxsty filter-container">
          <div class="mb10">
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
            ></el-input>
          </div>
          <div
            class="avue-crud"
            style="height: calc(100vh - 470px)"
            v-loading="loading"
          >
            <el-tree
              :data="ryData"
              ref="tree"
              node-key="id"
              :props="defaultProps"
              :default-expand-all="true"
              @node-click="handleSelectionChange"
              :filter-node-method="filterNode"
            ></el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="12" :offset="2">
        <div class="user__main boxsty filter-container">
          <el-table :data="tableData" style="width: 100%" height="300">
            <el-table-column
              header-align="center"
              align="center"
              prop="ryXm"
              label="姓名"
              width="180"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="员工子组"
              width="90"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="ryZwjb"
              label="岗位层级"
              width="120"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="ryZhiwei"
              label="部门"
            ></el-table-column>
            <el-table-column
              label="操作"
              header-align="center"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-button
                  @click="delClick(scope.row, scope.$index)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="btnSave">确定</el-button>
      <el-button @click="btnCancel">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { remote as remoteDict } from "@/api/admin/dict";
import { getDeptList } from "@/api/jiangjin/jiangjinryfzb";
import { fetchListfy } from "@/api/jiangjin/jiangjinryxxb";
import { getJiangJinBm } from "@/api/admin/dept";
export default {
  name: "personRyxxb",
  props: {},
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      userZjOptions: [], // 职级
      userZzOptions: [], // 人员子组
      visible: false,
      dataForm: {},
      userList: [],
      filterText: "",
      ryData: [],
      deptId: "",
      tableData: [],
      loading: false,
    };
  },
  created() {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    init(chooseList) {
      this.tableData=[]
      if(chooseList.length>0){
        chooseList.forEach((item) => {
          var item = {
            ryCode: item.ryCode,
            ryXm: item.ryName,
            rySjdwId: item.deptId,
            rySjdwCode: item.deptCode,
            rySjdw: item.deptName,
            ryZhiwei: item.ryZhiwei,
            ryZwjb:item.ryZwjb,
            userId:item.userId
          }
          this.tableData.push(item)
        })

      }

      this.visible = true;
      // 获取人员职级代码
      this.getJiangJinJg();
    },
    switchDepartment() {

      this.getRyfzmxbList();
    },
    handleSelectionChange(data) {

      if (data.ryXm && data.ryZhiwei) {
        this.tableData.push(data);
      }

     this.unique(this.tableData);

    },
    unique(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].userId == arr[j].userId) {
            //第一个等同于第二个，splice方法删除第二个
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    delClick(row, index) {
      console.log(index);
      console.log(row);
      this.tableData.splice(index, 1);
    },
    //获取奖金管理人机构
    getJiangJinJg() {
      getJiangJinBm().then((res) => {
        if (res.data.data != null && res.data.data.length > 0) {
          this.deptId = res.data.data[0].deptId;
          console.log(this.deptId);
        }
      });
      // 获取人员职级代码
      remoteDict("user_zj").then((response) => {
        this.userZjOptions = response.data.data;
      });
      // 获取员工子组代码
      remoteDict("subgroup").then((response) => {
        this.userZzOptions = response.data.data;
      });
      this.getRyfzmxbList();
    },
    //获取页面数据附加方法
    getRyfzmxbList() {
      getDeptList().then((resbm) => {
        this.loading = true;
        fetchListfy(1, this.dataForm).then((response) => {
          this.ryData = [];
          var bm = resbm.data.data;
          for (var a in response.data.data) {
            var ry = response.data.data[a];
            this.$set(ry, "deptCode", ry.ryCode);
            this.$set(ry, "deptId", ry.ryCode);
            this.$set(ry, "parentId", ry.rySjdwId);
            const s1 = ry.ryCode || "";
            const s2 = ry.ryZwjb || "";
            this.$set(ry, "name", ry.ryXm + "(" + s1 + ")" + "【" + s2 + "】");
            bm.push(ry);
          }
          this.ryData = this.getTree(bm, this.deptId, 1);
          console.log(this.ryData);
          this.loading = false;
        });
      });
    },
    // 数据tree结构化
    getTree(bmlist, id, bz) {
      return bmlist
        .filter((v) => {
          if (bz) {
            if (v.deptId === id) {
              return v;
            }
          } else {
            if (v.parentId === id) {
              return v;
            }
          }
        })
        .map((v) => {
          const children = this.getTree(bmlist, v.deptId, 0);
          if (children.length) v.children = this.getTree(bmlist, v.deptId, 0);
          return v;
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    btnSave() {
      this.$message.closeAll();
      if (this.tableData.length == 0) {
        this.$message.warning("请选择新增人员");
      } else {
        console.log(JSON.stringify(this.tableData.length))
        this.$emit("getUserList", this.tableData);
        this.visible = false;
      }
    },
    //取消按钮
    btnCancel() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>
</style>
